<template>
  <div class="admin-dashboard">
    <a-card title="管理员控制台" :bordered="false" class="dashboard-card">
      <div class="dashboard-header">
        <h2>系统数据概览</h2>
        <a-select
          v-model:value="selectedTimeRange"
          style="width: 150px"
          @change="handleTimeRangeChange"
        >
          <a-select-option value="week">最近一周</a-select-option>
          <a-select-option value="month">最近一月</a-select-option>
          <a-select-option value="quarter">最近一季度</a-select-option>
          <a-select-option value="year">最近一年</a-select-option>
        </a-select>
      </div>

      <!-- 数据卡片 -->
      <div class="stat-cards">
        <a-card class="stat-card">
          <template #title>
            <div class="stat-title">
              <user-outlined />
              <span>用户总数</span>
            </div>
          </template>
          <div class="stat-content">
            <div class="stat-number">{{ stats.userCount }}</div>
            <div class="stat-trend" :class="{ 'trend-up': stats.userTrend > 0 }">
              <arrow-up-outlined v-if="stats.userTrend > 0" />
              <arrow-down-outlined v-else />
              {{ Math.abs(stats.userTrend) }}%
            </div>
          </div>
        </a-card>

        <a-card class="stat-card">
          <template #title>
            <div class="stat-title">
              <team-outlined />
              <span>招聘者数量</span>
            </div>
          </template>
          <div class="stat-content">
            <div class="stat-number">{{ stats.recruiterCount }}</div>
            <div class="stat-trend" :class="{ 'trend-up': stats.recruiterTrend > 0 }">
              <arrow-up-outlined v-if="stats.recruiterTrend > 0" />
              <arrow-down-outlined v-else />
              {{ Math.abs(stats.recruiterTrend) }}%
            </div>
          </div>
        </a-card>

        <a-card class="stat-card">
          <template #title>
            <div class="stat-title">
              <solution-outlined />
              <span>面试场次</span>
            </div>
          </template>
          <div class="stat-content">
            <div class="stat-number">{{ stats.interviewCount }}</div>
            <div class="stat-trend" :class="{ 'trend-up': stats.interviewTrend > 0 }">
              <arrow-up-outlined v-if="stats.interviewTrend > 0" />
              <arrow-down-outlined v-else />
              {{ Math.abs(stats.interviewTrend) }}%
            </div>
          </div>
        </a-card>

        <a-card class="stat-card">
          <template #title>
            <div class="stat-title">
              <bank-outlined />
              <span>企业数量</span>
            </div>
          </template>
          <div class="stat-content">
            <div class="stat-number">{{ stats.companyCount }}</div>
            <div class="stat-trend" :class="{ 'trend-up': stats.companyTrend > 0 }">
              <arrow-up-outlined v-if="stats.companyTrend > 0" />
              <arrow-down-outlined v-else />
              {{ Math.abs(stats.companyTrend) }}%
            </div>
          </div>
        </a-card>
      </div>

      <!-- 图表区域 -->
      <div class="chart-container">
        <div class="chart-row">
          <div class="chart-wrapper">
            <h3>用户增长趋势</h3>
            <div ref="userGrowthChart" class="chart"></div>
          </div>
          <div class="chart-wrapper">
            <h3>面试数据分布</h3>
            <div ref="interviewDistributionChart" class="chart"></div>
          </div>
        </div>
        <div class="chart-row">
          <div class="chart-wrapper">
            <h3>热门技术领域</h3>
            <div ref="techFieldChart" class="chart"></div>
          </div>
          <div class="chart-wrapper">
            <h3>企业招聘活跃度</h3>
            <div ref="companyActivityChart" class="chart"></div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { message } from 'ant-design-vue'
import {
  UserOutlined,
  TeamOutlined,
  SolutionOutlined,
  BankOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons-vue'

// 时间范围选择
const selectedTimeRange = ref('month')

// 统计数据
const stats = ref({
  userCount: 1256,
  userTrend: 12,
  recruiterCount: 86,
  recruiterTrend: 8,
  interviewCount: 3245,
  interviewTrend: 15,
  companyCount: 42,
  companyTrend: 5,
})

// 图表引用
const userGrowthChart = ref(null)
const interviewDistributionChart = ref(null)
const techFieldChart = ref(null)
const companyActivityChart = ref(null)

// 图表实例
let userGrowthChartInstance: any = null
let interviewDistributionChartInstance: any = null
let techFieldChartInstance: any = null
let companyActivityChartInstance: any = null

// 表格加载状态
const tableLoading = ref(false)

// 时间范围变化处理
const handleTimeRangeChange = (value: string) => {
  // 这里应该是调用API获取不同时间范围的数据
  // 现在先模拟一下数据变化
  if (value === 'week') {
    stats.value = {
      userCount: 1256,
      userTrend: 5,
      recruiterCount: 86,
      recruiterTrend: 3,
      interviewCount: 245,
      interviewTrend: 8,
      companyCount: 42,
      companyTrend: 2,
    }
  } else if (value === 'month') {
    stats.value = {
      userCount: 1256,
      userTrend: 12,
      recruiterCount: 86,
      recruiterTrend: 8,
      interviewCount: 3245,
      interviewTrend: 15,
      companyCount: 42,
      companyTrend: 5,
    }
  } else if (value === 'quarter') {
    stats.value = {
      userCount: 1256,
      userTrend: 25,
      recruiterCount: 86,
      recruiterTrend: 15,
      interviewCount: 8765,
      interviewTrend: 23,
      companyCount: 42,
      companyTrend: 10,
    }
  } else if (value === 'year') {
    stats.value = {
      userCount: 1256,
      userTrend: 45,
      recruiterCount: 86,
      recruiterTrend: 30,
      interviewCount: 24567,
      interviewTrend: 35,
      companyCount: 42,
      companyTrend: 18,
    }
  }

  // 更新图表数据
  updateCharts()
}

// 初始化用户增长趋势图
const initUserGrowthChart = () => {
  if (!userGrowthChart.value) return

  userGrowthChartInstance = echarts.init(userGrowthChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['用户数', '招聘者数'],
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '用户数',
        type: 'line',
        smooth: true,
        data: [820, 932, 901, 934, 1290, 1330],
        itemStyle: {
          color: '#1890ff',
        },
      },
      {
        name: '招聘者数',
        type: 'line',
        smooth: true,
        data: [35, 42, 45, 55, 70, 86],
        itemStyle: {
          color: '#52c41a',
        },
      },
    ],
  }
  userGrowthChartInstance.setOption(option)
}

// 初始化面试分布图
const initInterviewDistributionChart = () => {
  if (!interviewDistributionChart.value) return

  interviewDistributionChartInstance = echarts.init(interviewDistributionChart.value)
  const option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
    },
    series: [
      {
        name: '面试分布',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: '技术面试' },
          { value: 735, name: 'HR面试' },
          { value: 580, name: '笔试' },
          { value: 484, name: '模拟面试' },
          { value: 300, name: '其他' },
        ],
      },
    ],
  }
  interviewDistributionChartInstance.setOption(option)
}

// 初始化技术领域图
const initTechFieldChart = () => {
  if (!techFieldChart.value) return

  techFieldChartInstance = echarts.init(techFieldChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      data: ['前端开发', '后端开发', '移动开发', '算法', '测试', '运维', '产品'],
      axisLabel: {
        interval: 0,
        rotate: 30,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '面试数量',
        type: 'bar',
        data: [320, 302, 301, 334, 390, 330, 220],
        itemStyle: {
          color: '#fa8c16',
        },
      },
    ],
  }
  techFieldChartInstance.setOption(option)
}

// 初始化企业活跃度图
const initCompanyActivityChart = () => {
  if (!companyActivityChart.value) return

  companyActivityChartInstance = echarts.init(companyActivityChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['阿里巴巴', '腾讯', '百度', '字节跳动', '华为', '美团', '京东', '网易'],
      axisLabel: {
        interval: 0,
        rotate: 30,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '面试场次',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130, 90],
        itemStyle: {
          color: '#722ed1',
        },
      },
    ],
  }
  companyActivityChartInstance.setOption(option)
}

// 更新图表数据
const updateCharts = () => {
  // 这里应该根据API返回的数据更新图表
  // 现在只是简单地重新初始化图表
  initUserGrowthChart()
  initInterviewDistributionChart()
  initTechFieldChart()
  initCompanyActivityChart()
}

// 处理窗口大小变化
const handleResize = () => {
  userGrowthChartInstance?.resize()
  interviewDistributionChartInstance?.resize()
  techFieldChartInstance?.resize()
  companyActivityChartInstance?.resize()
}

// 通过招聘者审核
const approveRecruiter = (record) => {
  message.success(`已通过 ${record.name} 的招聘者申请`)
  pendingRecruiters.value = pendingRecruiters.value.filter((item) => item.id !== record.id)
}

// 拒绝招聘者审核
const rejectRecruiter = (record) => {
  message.success(`已拒绝 ${record.name} 的招聘者申请`)
  pendingRecruiters.value = pendingRecruiters.value.filter((item) => item.id !== record.id)
}

// 组件挂载时初始化图表
onMounted(() => {
  initUserGrowthChart()
  initInterviewDistributionChart()
  initTechFieldChart()
  initCompanyActivityChart()

  window.addEventListener('resize', handleResize)
})

// 组件卸载前清理
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  userGrowthChartInstance?.dispose()
  interviewDistributionChartInstance?.dispose()
  techFieldChartInstance?.dispose()
  companyActivityChartInstance?.dispose()
})
</script>

<style scoped>
.admin-dashboard {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.dashboard-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dashboard-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 8px;
}

.stat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.stat-number {
  font-size: 28px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #ff4d4f;
}

.trend-up {
  color: #52c41a;
}

.chart-container {
  margin-top: 24px;
  margin-bottom: 24px;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.chart-wrapper {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.chart-wrapper h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
}

.chart {
  height: 300px;
}
</style>
